<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .input_text {
            border: 1px solid #d9d9d9;
            color: #aaa;
            outline: none;
        }

        .input_text_focus {
            border: 1px solid #ffd6db;
            color: #888;
            outline: none;
        }
    </style>
</head>

<body>
    <div class="new_header">
        <div class="new_wrap">
            <form id="hder_login_form_new" method="post">
                <input type="text" class="input_text" id="uname" value="邮箱/ID/手机号">
            </form>
        </div>
    </div>
    <script>

        /* 仿世纪佳缘网，显示和隐藏输入框中的提示内容，具体表现如下图：
        
        1）输入框获得焦点，提示内容消失，边框变色
        
        2）输入框失去焦点，如果内容为空，提示内容恢复，边框变色；如果内容不为空，只有边框变色 */

        // 获取元素
        const uname = document.querySelector('#uname');
        // 获取焦点时
        uname.onfocus = function() {
            // 默认内容清空
            if (this.value == '邮箱/ID/手机号')
                this.value = '';
            // 边框变色
            this.style.border = '1px solid #333';
        }
        // 失去焦点时
        uname.onblur = function() {
            // 为空显示默认内容
            if (this.value == '')
                this.value = '邮箱/ID/手机号';
            // 边框边色
            this.style.border = '1px solid #999';
        }
    </script>
</body>

</html>